/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Button,
} from 'antd';
import TextArea from 'antd/lib/input/TextArea';
const FormItem = Form.Item;
const { Option } = Select
const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 18
    }
};
class AddFrom extends PureComponent {
    state = {
        types: null,
        playingForm: 0
    }
    // 判断选中显示隐藏
    selects = (value) => {
        console.log('当前类型选中', value);
        this.setState({
            types: this.state.types = value,
        })
    }
    //选择播放形式
    changeForm = value => {
        console.log(value)
        this.setState({
            playingForm: value
        })
    }
    render() {
        const {
            formData,
            one,
            form: { getFieldDecorator },
        } = this.props;
        return (
            <Form >
                <Row>
                    <Col span={24}>
                        <FormItem {...formItemLayout} label={'屏幕名称:'}>
                            {getFieldDecorator('screenName', {
                                initialValue: one ? formData.screenName : null,
                                rules: [
                                    {
                                        required: true,
                                        message: '屏幕名称为空'
                                    }
                                ]
                            })(<Input placeholder='输入屏幕名称' allowClear maxLength={20} />)}
                        </FormItem>
                    </Col>
                    <Col span={24}>
                        <FormItem {...formItemLayout} label={'终端地址:'}>
                            {getFieldDecorator('equId', {
                                initialValue: one ? formData.equId : null,
                                rules: [
                                    {
                                        required: true,
                                        message: '终端地址为空'
                                    }
                                ]
                            })(<Input placeholder='输入终端地址' allowClear maxLength={20} />)}
                        </FormItem>
                    </Col>
                    <Col span={24}>
                        <FormItem {...formItemLayout} label={'播放设置:'}>
                        </FormItem>
                    </Col>
                    <Col span={24}>
                        <FormItem {...formItemLayout} label={'播放形式:'}>
                            {getFieldDecorator('typeId', {
                                initialValue: one ? formData.typeId : null,
                                rules: [
                                    {
                                        required: true,
                                        message: ''
                                    }
                                ]
                            })(<Select onChange={(value) => { this.changeForm(value) }} allowClear >
                                <Option value={0}>固定页面</Option>
                                <Option value={1}>循环播放</Option>
                            </Select>)}
                        </FormItem>
                    </Col>
                    {
                        this.state.playingForm === 1 || (one ? formData.typeId : null) === 1 ?
                            <Col span={24}>
                                <FormItem {...formItemLayout} label={'循环间隔:'}>
                                    {getFieldDecorator('blankTime', {
                                        initialValue: one ? formData.blankTime : null,
                                        rules: [
                                            {
                                                required: false,
                                                message: ''
                                            }
                                        ]
                                    })(<Select allowClear >
                                        <Option value={0}>10S</Option>
                                        <Option value={1}>20S</Option>
                                        <Option value={2}>30S</Option>
                                        <Option value={3}>1min</Option>
                                        <Option value={4}>10min</Option>
                                    </Select>)}
                                </FormItem>
                            </Col> : null
                    }
                    <Col span={24}>
                        <FormItem {...formItemLayout} label={'播放界面:'}>
                            {getFieldDecorator('cid', {
                                // initialValue: one ? formData.checkTypeFirstss1 : '',
                                rules: [
                                    {
                                        required: false,
                                        message: ''
                                    }
                                ]
                            })(<Button onClick={this.openCheckBox}>选择播放界面</Button>)}
                        </FormItem>
                    </Col>
                    <Col span={24}>
                        <FormItem {...formItemLayout} label={'描述:'}>
                            {getFieldDecorator('describes', {
                                initialValue: one ? formData.describes : null,
                                rules: [
                                    {
                                        required: false,
                                        message: '描述'
                                    }
                                ]
                            })(<TextArea allowClear maxLength={200} />)}
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        );
    }
}

export default Form.create()(AddFrom);
